<template>
	<view class="container">
		<view class="user-info">
			<image :src="data.avatar" mode=""></image>
			<view class="right">
				<view class="nick">{{data.nickname}}</view>
				<text class="tel">{{data.phone}}</text>
			</view>
		</view>

		<view class="vip-content">
			<block v-for="(item,index) in greadList" :key="index">
				<view class="title">{{item.name}}</view>
				<view class="con">
					<!-- <view> -->
					<view @tap="selectVipFun(item.name,itt)" :class="[1==1 ? 'item' : '',selectVip == itt.id ? 'select-vip' : 'no-select-vip']"
					 v-for="(itt,inn) in item.list" :key="inn">
						<image v-if="itt.is_recommend == 1" class="recome" src="/static/images/public/recommended.png" mode="aspectFit"></image>
						<view class="name">{{itt.name}}</view>
						<view class="price">￥<text>{{itt.money}}</text></view>
						<view class="desc" v-if="inn != 0">每月仅需{{itt.unit_price}}元</view>
					</view>
					<!-- </view> -->
				</view>
				<view v-if="index == 0" class="cut"></view>
			</block>
		</view>
		<!-- @tap="ruleClick('/pages/center/help/rulesDetail?type='+')" -->
		<!-- <view class="service-txt">会员服务协议</view> -->
		<view class="btn" @tap="buy" v-if="type == 'upgrade'">￥{{money}} 升级会员</view>
		<view class="btn" @tap="buy" v-else-if="type == 'renew'">￥{{money}} 续费会员</view>
		<button class="btn" @tap="buy" v-else>￥{{money}} 开通会员</button>
	</view>
</template>

<script>
	import {
		levelGrade,
		levelPay
	} from "@/api/user.js"
	import utils from "@/common/utils.js"
	export default {
		data() {
			return {
				type: '', // ''购买会员，upgrade升级会员
				greadList: [], // 会员卡列表
				selectVip: null, // 选中会员卡ID
				money: "0.00", //选中会员卡金额
				data: {}, //用户信息
				name: '', // 时长卡名称
				cardName: '', //会员卡等级名称
				cardId: null,
			};
		},
		onLoad(options) {
			this.type = options.type
			this.levelGrade();
		},
		created() {
			this.data = uni.getStorageSync("userInfo")
			this.data.phone = utils.hidden(this.data.phone, 3, 4)
		},
		methods: {
			levelGrade() {
				levelGrade().then(res => {
					let level = this.data.level
					if (this.type == 'upgrade') {
						uni.setNavigationBarTitle({
							title: "升级会员"
						})
						this.greadList = res.data.splice(1, 1)
						this.money = '0.00'
					} else if (this.type == 'renew') {
						uni.setNavigationBarTitle({
							title: "续费会员"
						})
						if (level == 1) {
							this.greadList = res.data.splice(0, 1)
						} else {
							this.greadList = res.data.splice(1, 1)
						}
					} else {
						uni.setNavigationBarTitle({
							title: "购买会员"
						})
						this.cardId = res.data[0].list[0].card_id
						this.selectVip = res.data[0].list[0].id
						this.greadList = res.data
						this.money = res.data[0].list[0].money
						this.cardName = res.data[0].name
						this.name = res.data[0].list[0].name
					}
				});
			},
			selectVipFun(cardName, obj) {
				if (this.type == 'upgrade') {
					levelPay({
						level_id: obj.id
					}).then(res => {
						this.selectVip = obj.id
						this.cardId = obj.card_id
						this.name = obj.name
						this.cardName = cardName
						this.money = res.data.payPrice
					})
				} else {
					this.selectVip = obj.id
					this.cardId = obj.card_id
					this.name = obj.name
					this.cardName = cardName
					this.money = obj.money
				}
			},
			ruleClick(url) {
				uni.navigateTo({
					url: url
				})
			},
			buy() {
				if (!this.selectVip) {
					return uni.showToast({
						icon:"none",
						title:"请选择会员卡类型"
					})
				}
				let data = {
					money: this.money,
					name: this.cardName + this.name,
					id: this.selectVip,
					cardId: this.cardId,
					type: this.type
				}
				uni.redirectTo({
					url: `/pages/pay/vipPay?data=${encodeURIComponent(JSON.stringify(data))}`
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	$con-width: 690rpx;

	.container {
		.user-info {
			width: 690rpx;
			height: 130rpx;
			background: linear-gradient(90deg, rgba(254, 241, 198, 1), rgba(242, 217, 161, 1));
			box-shadow: 0px 3rpx 10rpx 0px rgba(51, 51, 51, 0.2), 0px 2rpx 5rpx 0px rgba(255, 255, 255, 0.79);
			border-radius: 20rpx;
			width: $con-width;
			display: flex;
			margin: 60rpx auto;
			align-items: center;
			box-sizing: border-box;
			padding: 0 25rpx;

			image {
				width: 67rpx;
				height: 67rpx;
				border: 2rpx solid rgba(207, 187, 139, 1);
				border-radius: 50%;
			}

			.right {
				padding-left: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: rgba(99, 95, 88, 1);

				.nick {
					font-size: 24rpx;
					margin-bottom: 6rpx;
				}

				.tel {
					font-size: 20rpx;
				}
			}
		}

		.vip-content {
			.title {
				width: $con-width;
				font-size: 36rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				margin: 35rpx auto;
			}

			.con {
				display: flex;
				overflow-x: scroll;
				display: flex;
				flex-wrap: nowrap;
				height: 320rpx;
				width: 750rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.item {
					transition: all .2s linear;
					position: relative;
					float: left;
					box-shadow: 0 3rpx 7rpx 0 rgba(0, 0, 0, 0.35);
					border-radius: 8rpx;
					margin: 0 10rpx;
					display: inline-block;
					padding: 20rpx;
					width: 200rpx;
					min-width: 160rpx;
					;
					height: 240rpx;
					// background-image: url('../../../mall/static/images/no-select-vip.png');
					background-size: cover;

					.name {
						font-size: 30rpx;
						font-weight: bold;
						color: rgba(51, 51, 51, 1);
					}

					.price {
						padding-top: 30rpx;
						font-size: 28rpx;
						color: #333333;

						text {
							font-size: 40rpx;
							color: #333333;
						}
					}

					.desc {
						margin-top: 60rpx;
						text-align: center;
						font-size: 20rpx;
						color: rgba(187, 138, 73, 1);
						height: 40rpx;
						line-height: 40rpx;
						border: 2px solid rgba(187, 138, 73, 1);
						border-radius: 20rpx;
					}
				}

				.item:last-child {
					margin-right: 50rpx;
				}

				.no-select-vip {
					background-image: url('../../../mall/static/images/no-select-vip.png');
				}

				.select-vip {
					background-image: url('../../../mall/static/images/select-vip.png');
				}

				.recome {
					width: 41rpx;
					height: 42rpx;
					position: absolute;
					top: -20rpx;
					right: -20rpx;
				}
			}
		}

		.cut {
			width: 100%;
			height: 10rpx;
			background: rgba(247, 247, 247, 1);
		}

		.service-txt {
			text-align: center;
			font-size: 24rpx;
			color: #333;
			margin-top: 108rpx;
		}

		.btn {
			background: rgba(90, 83, 73, 1);
			border-radius: 43rpx;
			width: 690rpx;
			height: 86rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			line-height: 86rpx;
			text-align: center;
			margin: 50rpx auto 50rpx;
			margin: 50rpx auto calc(env(safe-area-inset-bottom) + 50rpx);
		}
	}
</style>
